<template>
  <div class="profit">
    <div class="profit_top">收益</div>
    <div class="number">
      <div class="number_top">
        <div class="li">
          <div class="num" v-if="state == 0">0</div>
          <div class="num" v-else>
            {{ userinfo.balance ? userinfo.balance : 0 }}
          </div>
          <div class="title">销售额</div>
        </div>
        <div class="li">
          <div class="num" v-if="state == 0">0</div>
          <div class="num" v-else>
            {{ userinfo.min_sales ? userinfo.min_sales : 0 }}
          </div>
          <div class="title">最低销售额</div>
        </div>
        <div class="li">
          <div class="num" v-if="state == 0">0</div>
          <div class="num" v-else>
            {{ userinfo.cost ? userinfo.cost : 0 }}
          </div>
          <div class="title">采购成本（含运费）</div>
        </div>
      </div>
      <div class="number_tx">
        <div class="tx_num">
          <div class="num_title">实际收益（元）</div>
          <div class="num_price" v-if="state == 0">0</div>
          <div class="num_price" v-else>
            {{ userinfo.income ? userinfo.income : 0 }}
          </div>
        </div>
        <div class="tx_btn" @click="clicktx">提现</div>
      </div>
    </div>
    <div class="btn" @click="ontixianinfo">
      <div class="btn_left">
        <img src="../assets/profit/txmx.png" alt />
        <span>提现明细</span>
      </div>
      <div class="btn_right">
        <img src="../assets/profit/jiantou.png" alt />
      </div>
    </div>

    <div class="btn" @click="goshouiyiinfo" v-if="state != 0">
      <div class="btn_left">
        <img src="@/assets/profit/shymx.png" alt />
        <span>收益明细</span>
      </div>
      <div class="btn_right">
        <img src="@/assets/profit/jiantou.png" alt />
      </div>
    </div>

    <!--    要做的-->
    <div class="btn" @click="gousezhichu" v-if="state != 0">
      <div class="btn_left">
        <img src="@/assets/profit/zhchmx.png" alt />
        <span>支出明细</span>
      </div>
      <div class="btn_right">
        <img src="@/assets/profit/jiantou.png" alt />
      </div>
    </div>

    <div class="btn" @click="gosellxiaoshou" v-if="state != 0">
      <div class="btn_left">
        <img src="@/assets/profit/xshe.png" alt />
        <span>销售额</span>
      </div>
      <div class="btn_right">
        <img src="@/assets/profit/jiantou.png" alt />
      </div>
    </div>

    <!--  要做的-->

    <div class="logo">
      <img src="@/assets/profit/logo.png" alt />
    </div>
    <div class="zhezhao" v-if="isshow"></div>
    <div class="zhezhao1" v-if="isshow">
      <div class="tankuang">
        <div class="yuan">
          <img src="@/assets/profit/tishi.png" alt />
        </div>
        <div class="bj2">
          <img src="@/assets/profit/bj2.png" alt />
        </div>
        <div class="p">
          <span class="span1">提示</span>
          <span class="span2">确认提交提现申请？</span>
          <div class="bottom">
            <div class="qx" @click="quxiaotx">取消</div>
            <div class="qd" @click="querentx">确定</div>
          </div>
        </div>
      </div>
    </div>
    <MyNavbar></MyNavbar>
  </div>
</template>

<script>
import MyNavbar from "@/components/MyNavbar";
import axios from "axios";
export default {
  data() {
    return {
      isshow: false,
      profit: 0,
      profits: {
        salesvolume: 0,
        minsalesvolume: 0,
        cost: 0,
        realreturn: 0,
      },
      userinfo: {},
      settle_in: 0,
      token: "",
      state: 0,
    };
  },
  components: {
    MyNavbar,
  },
  mounted() {
    this.token = window.localStorage.getItem("token");
    this.state = window.localStorage.getItem("state");
    this.settle_in = window.localStorage.getItem("settle_in");
    if (!window.localStorage.getItem("token")) {
      this.$router.replace("/my");
    } else if (
      this.state == 0 &&
      this.token != -1 &&
      this.token != "undefined"
    ) {
      this.$router.push("/bindingnumber");
    } else {
      axios
        .post("/index/user/info", this.$qs.stringify({
          token: this.token,
        }))
        .then((res) => {
          console.log(res.data.data, 666666);
          if (res.data.code === 1) {
            this.userinfo = res.data.data.user.store;
          } else if (res.data.code === -1) {
            // this.$toast(res.data.msg);
            axios.post("index/index/wxLogin").then((res) => {
              var http = res.data.data;
              window.localStorage.clear();
              window.location.href = http;
            });
          }
        });
    }
  },
  methods: {
    //提现按钮
    clicktx() {
      if (this.settle_in == 0) {
        this.$toast("商家未入驻，请先入驻");
        this.$router.push("/Settlement");
      } else {
        this.isshow = true;
      }
    },
    //取消提现
    quxiaotx() {
      this.isshow = false;
    },
    // 确认提现
    querentx() {
      axios
        .post("/index/user/cash_out", this.$qs.stringify({
          token: this.token,
          state: 1,
        }))
        .then((res) => {
          console.log(res.data);
          if (res.data.code === 1) {
            this.$toast(res.data.msg)
            this.userinfo.income = "0.00"
          } else {
            this.$toast(res.data.msg);
          }
        });
      this.isshow = false;
    },
    // 提现明细
    ontixianinfo() {
      if (this.settle_in == 0) {
        this.$toast("商家未入驻，请先入驻");
        this.$router.push("/Settlement");
      } else {
        this.$router.push("tixinfo");
      }
    },

    // 收益明细
    goshouiyiinfo() {
      if (this.settle_in == 0) {
        this.$toast("商家未入驻，请先入驻");
        this.$router.push("/Settlement");
      } else {
        this.$router.push("shouyinfo");
      }
    },

    // 支出明细(cristo)
    gousezhichu() {
      if (this.settle_in == 0) {
        this.$toast("商家未入驻，请先入驻");
        this.$router.push("/Settlement");
      } else {
        this.$router.push({ path: "/usezhichu" });
      }
    },

    //销售额cristo
    gosellxiaoshou() {
      if (this.settle_in == 0) {
        this.$toast("商家未入驻，请先入驻");
        this.$router.push("/Settlement");
      } else {
        this.$router.push({ path: "/sellxiaoshou" });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.profit {
  width: 100%;
  height: 100%;
  .profit_top {
    width: 100%;
    height: 44px;
    background: #fdd30a;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #323232;
    line-height: 44px;
    text-align: center;
  }
  .number {
    width: 100%;
    height: 145px;
    background: url("../assets/profit/bj.png") no-repeat 100% 145px;
    position: relative;
    margin-bottom: 60px;
    .number_top {
      width: 100%;
      height: 145px;
      display: flex;
      display: -webkit-flex;
      .li {
        width: 125px;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        align-items: center;
        margin-top: 32px;
        .num {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          line-height: 18px;
        }
        .title {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #434343;
          line-height: 13px;
          margin-top: 15px;
        }
      }
    }
    .number_tx {
      position: absolute;
      top: 95px;
      left: 15px;
      width: 345px;
      height: 90px;
      background: #ffffff;
      box-shadow: 0px 10px 20px 0px rgba(33, 33, 33, 0.08);
      border-radius: 7px;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: space-between;
      .tx_num {
        margin-left: 15px;
        .num_title {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #777777;
          line-height: 12px;
        }
        .num_price {
          font-size: 28px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #222222;
          line-height: 28px;
          margin-top: 20px;
        }
      }
      .tx_btn {
        text-align: center;
        margin-right: 15px;
        width: 55px;
        height: 24px;
        border: 1px solid #ff511e;
        border-radius: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ff511e;
        line-height: 24px;
      }
    }
  }
  .btn {
    width: 345px;
    height: 52px;
    padding: 0 15px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    .btn_left {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      img {
        width: 17px;
        height: 17px;
        margin-right: 12px;
      }
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 45px;
      }
    }
    .btn_right {
      img {
        width: 7px;
        height: 12px;
      }
    }
  }
  .logo {
    position: fixed;
    left: 132px;
    bottom: 65px;
    img {
      width: 112px;
      height: 112px;
    }
  }
  .zhezhao {
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 19;
  }
  .zhezhao1 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 19;
    .tankuang {
      width: 280px;
      height: 215px;
      background: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 265px;
      left: 47.5px;
      .yuan {
        width: 95px;
        height: 95px;
        background: #ffffff;
        box-shadow: 0px 10px 30px 0px rgba(75, 120, 250, 0.1);
        border-radius: 50%;
        position: absolute;
        top: -47.5px;
        left: 92.5px;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        img {
          width: 44px;
          height: 58px;
        }
      }
      .bj2 {
        width: 203px;
        height: 58.5px;
        position: absolute;
        top: 15px;
        left: 38.5px;
      }
    }
    .p {
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      align-items: center;
      margin-top: 66.5px;
      .span1 {
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        line-height: 17px;
      }
      .span2 {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 14px;
        margin-top: 10px;
      }
      .bottom {
        display: flex;
        display: -webkit-flex;
        align-items: center;
        margin-top: 45px;
        .qx {
          width: 110px;
          height: 45px;
          background: #ececec;
          border-radius: 22.5px;
          font-size: 17px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #555555;
          line-height: 45px;
          text-align: center;
        }
        .qd {
          width: 110px;
          height: 45px;
          background: #4b78fa;
          border-radius: 22.5px;
          font-size: 17px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 45px;
          text-align: center;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
